<template>
  <div class="shopList" style="margin:24px 24px 0 24px;">
    <div class="disFlex Flex-middle search shadow">
      <Form
        :model="formItem"
        :label-width="120"
        style="display:flex;flex-direction:row;align-items:center;flex-flow:wrap;height: 100px;"
        class="searchForm"
      >
        <FormItem label="用户名称/ID">
          <Input v-model="formItem.keyword" placeholder="请输入用户名称/ID" style="width:150px"></Input>
        </FormItem>
        <FormItem label="性别">
          <Select v-model="formItem.workerGender" style="width:150px">
            <Option value>性别不限</Option>
            <Option value="1">男</Option>
            <Option value="2">女</Option>
          </Select>
        </FormItem>
        <FormItem label="用户类型">
          <Select v-model="formItem.isEmpower" style="width:150px">
            <Option value>不限</Option>
            <Option value="0">未授权</Option>
            <Option value="1">已授权</Option>
          </Select>
        </FormItem>
        <FormItem label="是否关注公众号">
          <Select v-model="formItem.isSubscrible" style="width:150px">
            <Option value>不限</Option>
            <Option value="1">已关注</Option>
            <Option value="0">未关注</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchData">搜索</Button>
        </FormItem>
      </Form>
    </div>
    <TableList
      :columns="columns"
      :data="data"
      :page="page"
      :total="pageTotal*pageNum"
      :pageNum="pageNum"
      newOne
      @newOneFn="newOne"
      @changePage="changePage"
    ></TableList>
    <Modal title="交易明细" v-model="modal10" width="800" class-name="vertical-center-modal">
      <div style="min-height:200px;">
        <Table
          :columns="detailCol"
          :data="detailData"
          style="max-height:400px;overflow-y:scroll;border:none"
          class="detailTable"
        ></Table>
      </div>
    </Modal>
  </div>
</template>

<script>
import TableList from "@/components/consumer/tableList";
import { UserSaasList, UserWalletLog } from "api/recuit/user";

export default {
  name: "",
  data() {
    return {
      formItem: {
        keyword: "",
        isEmpower: "",
        isSubscrible: "",
        workerGender: ""
      },
      empowerArr: ["未授权", "已授权"],
      subArr: ["未关注", "已关注"],
      genderArr: ["未知", "男", "女"],
      columns: [
        {
          title: "用户ID",
          key: "phone",
          width:200
        },
        {
          title: "用户信息",
          key: "action",
          width: 250,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  alignItems: "center"
                }
              },
              [
                h("img", {
                  attrs: {
                    src: params.row.worker_avatar
                  },
                  style: {
                    padding: "2px",
                    width: "80px",
                    height: "80px"
                  },
                  on: {
                    click: () => {
                      // this.show(params.index);
                    }
                  }
                }),
                h(
                  "span",
                  {
                    style: {
                      marginLeft: "15px"
                    }
                  },
                  params.row.worker_nickname
                )
              ]
            );
          }
        },
        {
          title: "绑定企业",
          key: "title",
          width:200,
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  marginLeft: "15px"
                }
              },
              params.row.title || '未绑定'
            );
          }
        },
        {
          title: "性别",
          key: "gender",
          width:100,
          render: (h, params) => {
            return h("div", this.genderArr[params.row.gender] || '未知');
          }
        },
        {
          title: "投递次数",
          key: "postApplyJobs",
          width:105,
        },
        {
          title: "职位收藏",
          key: "collectJobs",
          width:105,
        },
        {
          title: "账户余额（元）",
          key: "balance",
          width:140,
        },
        {
          title: "用户类型",
          key: "is_empower",
          width:120,
          render: (h, params) => {
            return h("div", this.empowerArr[params.row.is_empower]);
          }
        },
        {
          title: "是否关注公众号",
          key: "is_subscrible",
          width:140,
          render: (h, params) => {
            return h("div", this.subArr[params.row.is_subscrible]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "middle"
                  },
                  style: {
                    margin: "0 2px"
                  },
                  on: {
                    click: () => {
                      // this.show(params.index);
                      this.getLog(params.row.user_saas_id);
                      this.modal10 = true;
                    }
                  }
                },
                "明细"
              )
              // h(
              //   "Button",
              //   {
              //     props: {
              //       type: "error",
              //       size: "middle"
              //     },
              //     style: {
              //       margin: "0 2px"
              //     },
              //     on: {
              //       click: () => {
              //         // this.show(params.index);
              //       }
              //     }
              //   },
              //   "拉黑"
              // )
            ]);
          }
        }
      ],

      data: [],
      detailCol: [
        {
          title: "操作时间",
          key: "time_create"
        },
        {
          title: "操作名称",
          key: "description"
        },
        {
          title: "金额",
          key: "change"
        }
      ],
      detailData: [],
      modal10: false,
      page: 0,
      pageNum: 5, //显示条数
      jobSum: 0, //职位总数
      auditStatus: 1, //查询状态
      pageTotal: 0 //页面总数
    };
  },
  components: {
    TableList
  },

  mounted() {
    this.getData();
  },

  methods: {
    //切换页面
    changePage(data) {
      let { page } = data;
      this.page = --page;
      this.getData();
    },
    //条件查询
    searchData() {
      this.page = 0;
      this.getData();
    },
    //获取明细数据
    getLog(userSaasId) {
      UserWalletLog({ userSaasId }).then(result => {
        let { walletLogList, page } = result;
        walletLogList && (this.detailData = walletLogList)
      });
    },
    //获取数据
    getData() {
      let page = this.page;
      let pageNum = this.pageNum;
      let formItem = this.formItem;
      let dataList = new Object();
      dataList.page = ++page;
      dataList.pageNum = pageNum;
      //获取查询条件
      for (let i in formItem) {
        dataList[i] = formItem[i];
      }

      UserSaasList(dataList).then(res => {
        let { userSaasList, userSaasCount, page } = res;
        this.data = userSaasList;
        this.companySum = userSaasCount;
        this.pageTotal = page.pageTotal;
        this.page = Number(page.page)
      });
    }
  }
};
</script>

<style scoped lang="less">
/*表头标题*/
.table-header-title {
  height: 100%;
  padding: 0 18px;
  box-sizing: border-box;
}

/*表头提示图标*/
.table-header-icon {
  font-size: 20px;
  margin-left: 10px;
}

/*弹窗标题*/
.alert-title {
  margin-top: 10px;
}

/*搜索*/
.search {
  padding: 18px;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 24px;
}

/*搜索下拉*/
.search-select {
  min-width: 128px;
  width: 128px;
  margin-right: 15px;
}

/*搜索输入框*/
.search-input {
  margin-right: 15px;
  top: 0;
}

.search-button {
  /* width: 80px;
    min-width: 80px; */
  margin-left: 15px;
}
.timeSpan {
  margin: 0 15px;
}
.detailTable::-webkit-scrollbar {
  width: 15px;
}
.detailTable tr {
  width: 700px;
}
.searchForm {
  .ivu-form-item {
    margin-bottom: 0;
  }
}
</style>
